import React from 'react'
import { Button, Layout, Avatar, Dropdown } from 'antd'
import './index.css'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import { collapseMenu } from '../../store/reducers/tab'

const { Header } = Layout

const CommonHeader = ({ isCollapse }) => {
  //登出
  const logout = () => {
    console.log(111)
    localStorage.clear()

    window.location.reload()
  }
  //头像菜单数据
  const items = [
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer">
          个人中心
        </a>
      ),
    },
    {
      key: '2',
      label: (
        <a onClick={logout} target="_blank" rel="noopener noreferrer">
          退出
        </a>
      ),
    },
  ]
  const dispatch = useDispatch()
  //点击咱开收起
  const setCollapsed = () => {
    dispatch(collapseMenu())
    console.log(isCollapse)
  }
  return (
    <Header className="header-container">
      <Button
        type="text"
        icon={isCollapse ? <MenuUnfoldOutlined /> : <MenuFoldOutlined></MenuFoldOutlined>}
        // onClick={() => setCollapsed(!collapsed)}
        style={{
          fontSize: '16px',
          width: 64,
          height: 32,
          backgroundColor: '#fff',
        }}
        onClick={setCollapsed}
      />
      <Dropdown menu={{ items }}>
        <Avatar size={36} src={<img src={require('../../assets/images/user.png')}></img>}></Avatar>
      </Dropdown>
    </Header>
  )
}

export default CommonHeader
